<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8"/>
	<title>任务七：实现常见的技术产品官网的页面架构及样式布局</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<header class="header">
		<h2>新世界</h2>
		<nav>
			<ul>
				<li><a href="#" class="active">首页</a></li>
				<li><a href="#">最新活动</a></li>
				<li><a href="#">项目介绍</a></li>
				<li><a href="#">爱心社区</a></li>
				<li class="login"><a href="#">登录</a></li>
			</ul>
		</nav>
	</header>
	<div class="banner">
		<div class="shade"></div>
		<div class="b-ct">
			<strong>Time of new life</strong>
			<p>新时代，年轻的人们让我们一起<br/>体验新生活，享受新生活</p>
			<a href="#">开始体验</a>
		</div>
	</div>
	<div class="li4">
		<ul>
			<li>
				<img src="image/li01.gif" />
				<p><span>打造全新世界观，让你更爱你的生活</span></p>
			</li>
			<li>
				<img src="image/li02.gif" />
				<p><span>丰富多彩的公益活动，发挥新世界的主人公意识</span></p>
			</li>
			<li>
				<img src="image/li03.gif" />
				<p><span>时尚的新理念，超前体验未知的生活</span></p>
			</li>
			<li>
				<img src="image/li04.gif" />
				<p><span>完善的培养机制，培养你全新的世界观</span></p>
			</li>
		</ul>
	</div>
	<!-- -->
	<div class="anews">
		<div class="h-86"></div>
		<img src="image/anews.gif">
		<p>关于新世界，你不知道的还有什么？</p>
	</div>
	<div class="map">
		<div class="zz02"></div>
		<h3>查找新世界城市活动信息</h3>
		<p class="line"></p>
		<small>每个城市的有不同的活动信息，请自主查询您所需要了解的城市</small>
		<br/>
		<div class="form clearfix">
			<form action="" method="post">
				<div class="input01">
					<input class="input " type="text" name="" placeholder="中国"/>
					<ul>
						<li></li>
					</ul>
				</div>
				<div class="input02">
					<input class="input " type="text" name="" placeholder="省份"/>
					<ul>
						<li>北京市</li>
						<li>天津市</li>
						<li>内蒙古市</li>
						<li>郑州市</li>
						<li>洛阳市</li>
					</ul>
				</div>
				<select class="input03 select ">
					<option>城市</option>
				</select>
				
				<button class="input input04">搜索</button>
			</form>
		</div>
	</div>
	<div class="actives">
		<ul class="acul">
			<li>
				<div class="ac-d">
					<img src="image/ac01.gif"/>
				</div>
				<p>北京活动</p>
				<small>新社区大联盟</small>
			</li>
			<li class="cur-li">
				<p>上海活动</p>
				<small>夜上海新景观探索</small>
				<div class="ac-d current">
					<img src="image/ac02.gif"/>
				</div>
			</li>
			<li>
				<div class="ac-d">
					<img src="image/ac03.gif"/>
				</div>
				<p>深圳活动</p>
				<small>全新海岸线观点站</small>
			</li>
			<li>
				<div class="ac-d">
					<img src="image/ac04.gif"/>
				</div>
				<p>香港活动</p>
				<small>奢侈消费大放送</small>
			</li>
		</ul>
	</div>
	<div class="tm">
		<div class="tm-lt">
			<h2>新世界</h2>
			<time>TIME</time>
			<p>
				@新世界－北京2016.04.01
			</p>
		</div>
		<div class="tm-rt">
			<h3>新世界/<span>01</span></h3>
			<p>新世界是个新世界新世界是个新世界新世界是个新世界
新世界是个新世界新世界是个新世界新世界是个新世界
新世界是个新世界新世界是个新世界新世界是个新世界
新世界是个新世界新世界是个新世界</p>
			<a href="#">更多详情</a>
			<ol class="clearfix">
				<li class="active"></li>
				<li></li>
				<li></li>
			</ol>
		</div>
	</div>
	<ul class="u3">
		<li class="li01">
			<h3>新时代<br/>关于爱生活的我们</h3>
			<p></p>
			<a href="#">查看更多</a>
		</li>
		<li class="li02">
			<h3>新时代<br/>关于爱生活的我们</h3>
			<p></p>
			<a href="#">查看更多</a>
		</li>
		<li class="li03">
			<div class="sj"></div>
		</li>
	</ul>
	<div class="zyz">
		<h3>查找新世界城市活动信息</h3>
		<p class="line"></p>
		<small>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，<br/>有激情
那就不要犹豫，快来加入我们，成为改变所有人生活的人 </small>
	</div>
	<div class="guest clearfix">
		<div class="g-lt">
			<h3>新世界志愿者协议</h3>
			<p>加入新世界志愿者的人员必须遵守中华人民共共和国的
相关法律法规，并且本着平等资源的原则 ......</p>
			<a href="#">more</a>
			<div class="h-32"></div>
			<h3>新世界志愿者权利</h3>
			<p>新世界志愿者享受新世界内部所有资源共享的权利，并
且享受所在四新世界活动的优先参与资格</p>
			<a href="#">more</a>
			<div class="h-32"></div>
			<h3>更多条款</h3>
			<a href="#">more</a>
		</div>
		<div class="g-rt">
			<input type="text" class="g-input m-13" placeholder="姓名:"/>
			<input type="text" class="g-input" placeholder="年龄:"/>
			<input type="text" class="g-input m-13" placeholder="联系方式:"/>
			<input type="text" class="g-input" placeholder="联系地址:"/>
			<!--<input type="text" height="10" class="g-input g-input02" placeholder="请简单描述您梦想的生活:"/>-->
			<textarea placeholder="请简单描述您梦想的生活:" class="g-input g-input02"></textarea>
			<input type="submit" class="g-input g-input03"/>
		</div>
	</div>
	<footer>
		<div class="foot-top">
			<h3>联系我们</h3>
			<p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br/>也可以通过以下任何方式关注我们动态</p>
			<div class="search clearfix">
				<input type="text" class="inpu" placeholder="search For" />
				<input type="submit" class="sea" value="提交" />
			</div>
			<a href="#"><img src="image/a01.gif"></a>
			<a href="#"><img src="image/a02.gif"></a>
			<a href="#"><img src="image/a03.gif"></a>
			<a href="#"><img src="image/a04.gif"></a>
		</div>
		<div class="foot-bottom">
			<div class="copyright">
				<span class="copy-lt">@2016新世界</span>
				<span class="copy-rt">Back to top</span>
			</div>
		</div>
	</footer>
</body>
</html>